<template>
  <el-dialog title="新增车辆" :visible="showDialog" @close="closeDialogFn">
    <!-- 表单 -->
    <el-form ref="form" :model="form" label-width="80px" v-loading="sysloading">
      <el-form-item label="车辆类型">
        <el-select v-model="form.truckTypeId" placeholder="请选择">
          <el-option value="1575066321985286145" label="4.2米厢式货车" />
          <el-option value="1575257668885229569" label="6.8米厢式货车" />
          <el-option value="1575257460197634049" label="12.8米厢式货车" />
        </el-select>
      </el-form-item>
      <el-form-item label="车辆号码">
        <el-input v-model="form.licensePlate" />
      </el-form-item>
      <el-form-item label="GPS设备ID">
        <el-input v-model="form.deviceGpsId" />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button @click="closeDialogFn">取消</el-button>
      <el-button type="danger" @click="submitFn"> 确定 </el-button>
    </template>
  </el-dialog>
</template>
<script>
import { addCarGpsApi } from '@/api/car'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      sysloading: false, // 确定按钮loading
      // 表单
      form: {
        truckTypeId: '', // 车辆类型
        licensePlate: '', // 车牌号码
        deviceGpsId: '' // GPSid
      },
      rules: {
        name: [
          {
            required: true,
            message: '车辆类型不能为空',
            trigger: ['blur', 'change']
          },
          {
            min: 1,
            max: 20,
            message: '车辆类型在1-20位',
            trigger: ['blur', 'change']
          }
        ],
        allowableLoad: [
          {
            required: true,
            message: '应载重量不能为空',
            trigger: ['blur', 'change']
          }
        ],
        allowableVolume: [
          {
            required: true,
            message: '应载体积不能为空',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },

  methods: {
    // 关闭弹层
    closeDialogFn() {
      this.$emit('update:showDialog', false)
      this.form = {
        truckTypeId: '', // 车辆类型
        licensePlate: '', // 车牌号码
        deviceGpsId: '' // GPSid
      }
      this.$refs.form.resetFields() // 重置校验结果
    },

    // 确定按钮
    async submitFn() {
      console.log(this.form)
      this.sysloading = true
      const res = await addCarGpsApi(this.form)
      console.log(res)
      this.$message.success('添加成功')
      this.sysloading = false
      //   关闭弹窗，清空表单，清空校验
      this.closeDialogFn()
      // 添加成功，从新渲染角色列表
      this.$parent.getCarList()
    }
  }
}
</script>
<style lang="scss" scoped>
.tree-box {
  position: absolute;
  width: 50%;
  max-height: 2rem;
  left: 0;
  top: 0.6rem;
  z-index: 100;
  border: 0.0133rem solid #ccc;
  border-radius: 0.0533rem;
  padding-right: 0.0667rem;
  overflow-y: auto;
  background-color: #fff;
}
</style>
